<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 专项治理评分管理 -->
    <div id="base-breadcrumb" style="position: relative; overflow: hidden">
      <!-- 搜索 -->
      <searchData :searchData="searchArr" @search="search"></searchData>
      <!-- 表格 -->
      <a-card :bordered="false">
        <!-- <title-name :title="$route.meta.title"></title-name> -->
        <a-row type="flex" style="flex-wrap: nowrap">
          <a-button v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_022_add_01'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_022_add_01'
                      }
              ]" class="mb12" icon="plus" type="primary" @click="handleManage(2)"
            >新增上报</a-button
          >
          <div>
            <a-date-picker
                    v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_022_expbu_05'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_022_expbu_05'
                      }
              ]"
              mode="year"
              :open="yearOpen"
              @change="yearOpen = true"
              @openChange="yearOpen = !yearOpen"
              @panelChange="handleExport"
            >
              <a-button class="ml12" type="primary" icon="download">导出在建项目专项治理评分统计</a-button>
            </a-date-picker>
            <a-modal
              title="提示"
              :width="500"
              :visible="visible"
              :footer="null"
              @cancel="visible = false"
              :zIndex="9000"
            >
              <div class="mb20">
                <a-icon type="info-circle" style="color: #faad14; margin-right: 6px" />
                确定导出在建项目专项治理评分统计
              </div>
              <div align="right">
                <a-button
                  @click="
                    visible = false
                    yearOpen = false
                  "
                  >取消</a-button
                >
                <service-export-mould
                  class="ml12"
                  :serviceiUrl="qualityApiUrl"
                  url="/quality/six-excel/excel/spe"
                  :requestParams="{ year: year, isBuild: true }"
                  buttonText="确定"
                  @beforeDownload="
                    visible = false
                    yearOpen = false
                  "
                ></service-export-mould>
              </div>
            </a-modal>
          </div>
          <service-export-mould
                  v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_022_expco_06'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_022_expco_06'
                      }
              ]"
            class="ml12"
            :serviceiUrl="qualityApiUrl"
            icon="cloud-download"
            url="/quality/six-excel/excel/spe"
            buttonText="导出竣工项目专项治理评分统计"
          ></service-export-mould>
        </a-row>

        <!-- 统计汇总 -->
        <AuditSummary :form="queryParam" :loadCount="loadCount" :api="api" :countList="countList" />

        <a-tabs v-model="evalMethodId" @change="callback">
          <a-tab-pane v-for="item in tabList" :key="item.id" :tab="item.name" :disabled="!tabStatus">
            <!--Content of Tab Pane 1 数据调用-->
          </a-tab-pane>
        </a-tabs>

        <!-- 表格 -->
        <list-table ref="table" tableLayout="fixed" size="default" rowKey="id" :columns="columns" :request="loadData" :alert="true" show-size-changer show-quick-jumper showPagination="auto">
          <span slot="action" slot-scope="text, record">
            <MoreButton>
              <!-- 查看 -->
              <a v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_022_loo_04'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_022_loo_04'
                      }
              ]" @click="handleManage(0, record)">查看</a>
              <!-- 编辑 -->
              <template v-if="record.statusCode === '0' || record.statusCode === '3'">
                <a v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_022_edi_02'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_022_edi_02'
                      }
              ]" @click="handleManage(1, record)">编辑</a>
              </template>
              <!-- 删除 -->
              <template v-if="record.statusCode === '0'">
                <a v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_022_del_03'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_022_del_03'
                      }
              ]" @click="handleRemove(record)">删除</a>
              </template>
              <!-- 当状态为审批中 -->
              <!-- <template v-if="record.statusCode === '1'">
                <a-divider type="vertical"></a-divider>
                <a @click="$bus.$emit('showApprovalDetailsDialog', record.id)">审批详情</a>
              </template> -->
            </MoreButton>
          </span>
          <!-- 状态 -->
          <template slot="statusCode" slot-scope="text, record">
            <status-display :statusCode="record.statusCode" :statusMap="statusMap"></status-display>
          </template>
        </list-table>
      </a-card>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import { scoring, typesLabel } from '@/api/quality/quality' // api
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目名称
import OrgTreeSelect from '@/components/OrgTreeSelect'
import SelectGovScoreClass from '@/components/Select/SelectGovScoreClass' // 评价类型
import StatusDisplay from '@/components/StatusDisplay'
import AuditSummary from '@/views/quality/components/AuditSummary' // 统计汇总
import ServiceExportMould from '@/components/ServiceExportMould'
import { qualityApiUrl } from '@/api/config.js'
import SelectProjectStatus from '@/views/quality/components/SelectProjectStatus' // 项目状态
const searchArr = [
  // 搜索框
  {
    name: '所属单位',
    valueKey: 'searchQuery',
    type: OrgTreeSelect,
  },
  // {
  //   name: '所属分公司',
  //   type: SelectSubCompany,
  //   valueKey: 'branchCompanyId'
  // },
  // {
  //   name: '所属项目',
  //   type: SelectProject,
  //   valueKey: 'projectId'
  // },
  {
    name: '项目状态',
    type: SelectProjectStatus,
    valueKey: 'projectStatus',
  },
  {
    name: '评价类型',
    valueKey: 'cateId',
    type: SelectGovScoreClass
  },
  {
    name: '评价时间',
    type: 'dateRange',
    value: 'date',
    attr: {
      rangeFormat: ['startDate', 'endDate']
    }
  }
]
const columns = [
  {
    title: '分公司',
    ellipsis: true,
    dataIndex: 'branchCompanyName'
  },
  {
    title: '项目',
    ellipsis: true,
    dataIndex: 'projectName'
  },
  {
    title: '轴线/部位',
    ellipsis: true,
    dataIndex: 'axisPart'
  },
  {
    title: '考核得分',
    ellipsis: true,
    dataIndex: 'score'
  },
  {
    title: '评价时间',
    ellipsis: true,
    dataIndex: 'fillerDate'
  },
  {
    title: '状态',
    dataIndex: 'statusCode',
    scopedSlots: { customRender: 'statusCode' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '180px',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'a' + Date.now(),
  components: {
    STable,
    StatusDisplay,
    AuditSummary,
    ServiceExportMould
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      qualityApiUrl,
      statusMap: {
        0: {
          label: '未提交',
          color: '#FE5500'
        },
        1: {
          label: '已提交',
          color: '#00A854'
        }
      }, // 状态枚举值
      queryParam: {}, // 查询参数
      evalMethodId: 0,
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        if (!this.tabStatusDefault) {
          return
        }
        const requestParameters = Object.assign({ evalMethodId: this.evalMethodId }, parameter, this.queryParam)
        return scoring.postList(requestParameters).then((res) => {
          this.tabStatus = true
          return res
        })
      },
      countList: [
        {
          title: '总数：',
          value: 'total'
        },
        {
          title: '未提交：',
          value: 'draftNum'
        },
        {
          title: '已提交：',
          value: 'pastNum'
        }
      ], //汇总列表
      api: scoring,
      loadCount: 0, // 汇总加载控件
      tabList: [], // 标签页列表
      tabStatus: false, // 标签页切换状态
      tabStatusDefault: false, // 表单数据是否可请求
      yearOpen: false, // 年份表单控件
      yearOpen2: false, // 年份表单控件
      year: void 0, //年份
      visible: false, // 确认框loading
      exportType: 0 // 导出类型
    }
  },
  created() {
    typesLabel.getList({ type: 21 }).then((res) => {
      if (res.code === 200) {
        let data = res.data
        this.tabList = data
        this.evalMethodId = data ? data[0].id : ''
        this.tabStatusDefault = true
        this.$refs.table.refresh(true)
      }
    })
  },
  methods: {
    /**
     * 打开导出日历
     * val:月份表单值
     */
    handleExport(val) {
      this.year = val.format?.('YYYY')
      this.yearOpen = false
      this.visible = true
    },
    callback(key) {
      // this.queryParam.evalMethodId = this.tabList?this.tabList[key].id : ''
      if (this.tabStatus) {
        this.tabStatus = false
        this.$refs.table.refresh(true)
      }
    },
    /**
     * 搜索
     */
    search(value) {
      value && (this.queryParam = value)
      this.$refs.table.refresh(true)
      this.loadCount++
    },
    /**
     * 删除草稿
     */
    handleRemove(record) {
      this.$confirm({
        title: '温馨提示',
        content: '确定删除草稿？',
        onOk: () => {
          return scoring.remove({ id: record.id }).then((res) => {
            this.$message.success('删除成功！')
            // 关闭当前页
            this.search()
          })
          // .catch((res) => {
          //   this.$message.warning('删除失败！')
          // })
        }
      })
    },
    /**
     * 操作栏
     */
    handleManage(type, record) {
      this.editModel = type
      let query = {
        editModel: type
      }
      if (record && record.id) {
        query.id = record.id
      }
      this.$router.push({
        name: '/quality/governanceScore/governanceScoreManage/governanceScoreManageEdit',
        query
      })
    }
  }
}
</script>
